<template>
  <div class="app-container2 health_wrap">
    <div class="charts_wrap">
      <div class="charts_items">
        <div class="charts_main">
          <pieCharts :echartsData="echartsData1" />
        </div>
        <div class="charts_info">
          <div class="info_div">正常:265</div>
          <div class="info_div">异常:15</div>
          <div class="info_div">故障:5</div>
          <div class="info_div">离线:5</div>
        </div>
      </div>
      <div class="charts_items">
        <div class="charts_main">
          <pieCharts :echartsData="echartsData2" />
        </div>
        <div class="charts_info">
          <div class="info_div">H＞90:96</div>
          <div class="info_div">80＜＝H＜90:84</div>
          <div class="info_div">60＜＝H＜80:12</div>
          <div class="info_div">H＜60:8</div>
        </div>
      </div>
      <div class="charts_items">
        <div class="charts_main">
          <pieCharts :echartsData="echartsData3" />
        </div>
        <div class="charts_info">
          <div class="info_div">正常:9072</div>
          <div class="info_div">异常:824</div>
        </div>
      </div>
    </div>
    <div class="health_content">
      <div class="search_wrap">
        <div class="search_list">
          <div class="search_item">
            <div class="search_name">设备类型:</div>
            <div class="search_ipt">
              <el-select
                class="js_common_select"
                v-model="typeValue"
                popper-class="js_common_fenyeqi_popper"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search_item">
            <div class="search_name">设备状态:</div>
            <div class="search_ipt">
              <el-select
                class="js_common_select"
                v-model="statusValue"
                popper-class="js_common_fenyeqi_popper"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search_item search_item_other">
            <div class="search_name">设备健康度:</div>
            <div class="search_other">
              <div>从</div>
              <div class="search_ipt">
                <el-input
                  class="js_common_input"
                  v-model="jiankangMin"
                  placeholder="数字"
                ></el-input>
              </div>
              <div>至</div>
              <div class="search_ipt">
                <el-input
                  class="js_common_input"
                  v-model="jiankangMax"
                  placeholder="数字"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="search_item">
            <div class="search_name">设备名称:</div>
            <div class="search_ipt">
              <el-input
                class="js_common_input"
                v-model="nameValue"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
          <div class="search_item">
            <div class="search_name">设备编码:</div>
            <div class="search_ipt">
              <el-input
                class="js_common_input"
                v-model="codeValue"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="search_btn">
          <el-button class="js_common_btn">查询</el-button>
        </div>
      </div>
      <div class="table_main">
        <el-table
          :data="tableData"
          class="jk_common_table001"
          height="style"
          style="width: 100%; height: 100%"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column type="index" label="序号" width="55">
          </el-table-column>
          <el-table-column prop="name" label="设备名称" width="150">
          </el-table-column>
          <el-table-column prop="code" label="设备编码" width="180">
          </el-table-column>
          <el-table-column prop="type" label="设备类型" width="200">
          </el-table-column>
          <el-table-column prop="status" label="设备状态" width="180">
            <template slot-scope="scope">
              <div class="table_box_status">
                <div
                  :class="['icon', getstatusClassFn(scope.row.status)]"
                ></div>
                <div class="name">{{ scope.row.status }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="zhenduanResult"
            label="设备自诊断结果"
          ></el-table-column>
          <el-table-column label="健康度" width="180">
            <template slot-scope="scope">
              <div class="table_box_use">
                <div class="use_wrap">
                  <div class="use_info">
                    <div
                      class="use_tiao zc"
                      :style="{ width: scope.row.healthlv }"
                    ></div>
                  </div>
                </div>
                <div class="use_text">{{ scope.row.healthlv }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operate" label="操作">
            <template>
              <el-button type="text" size="small">预防维护</el-button>
              <el-button type="text" size="small">故障解决</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main_fenye">
        <el-pagination
          class="js_common_fenyeqi"
          :current-page="1"
          :page-size="10"
          :pager-count="5"
          :append-to-body="false"
          popper-class="js_common_fenyeqi_popper"
          layout="prev, pager, next,sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import pieCharts from "./component/pieCharts.vue";
export default {
  components: {
    pieCharts,
  },
  data() {
    return {
      typeValue: "",
      typeOptions: [
        {
          value: "选项1",
          label: "历史服务器",
        },
        {
          value: "选项2",
          label: "计算服务器",
        },
        {
          value: "选项3",
          label: "控制站",
        },
        {
          value: "选项4",
          label: "操作员站",
        },
      ],
      statusValue: "",
      statusOptions: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "异常",
        },
      ],
      jiankangMin: "",
      jiankangMax: "",
      nameValue: "",
      codeValue: "",
      tableData: [
        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "正常",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "100%",
        },

        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "异常",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "60%",
        },
        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "离线",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "0%",
        },
        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "故障",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "20%",
        },
        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "正常",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "100%",
        },
        {
          name: "D21198",
          code: "1230XD2314FN49",
          type: "控制站01-板卡01",
          status: "离线",
          zhenduanResult: "故障模式20项，0项异常",
          healthlv: "0%",
        },
      ],
      echartsData1: {
        arr: [
          {
            name: "正常",
            value: "265",
          },
          {
            name: "异常",
            value: "15",
          },
          {
            name: "故障",
            value: "5",
          },

          {
            name: "离线",
            value: "5",
          },
        ],
        text: "诊断设备数量",
        subtext: "300",
        colorArr: ["#24BAE4", "#A8DFFA", "#2168B0", "#62D9AD"],
      },
      echartsData2: {
        arr: [
          {
            name: "A",
            value: "90",
          },
          {
            name: "B",
            value: "84",
          },
          {
            name: "C",
            value: "28",
          },

          {
            name: "D",
            value: "18",
          },
        ],
        text: "评估设备数量",
        subtext: "300",
        colorArr: ["#24BAE4", "#62D9AD", "#FAC858", "#EE6666"],
      },
      echartsData3: {
        arr: [
          {
            name: "正常",
            value: "9072",
          },
          {
            name: "异常",
            value: "824",
          },
        ],
        text: "设备自诊断项",
        subtext: "9896",
        colorArr: ["#24BAE4", "#62D9AD"],
      },
    };
  },
  methods: {
    getstatusClassFn(status) {
      if (status === "正常") {
        return "zc";
      } else if (status === "异常") {
        return "yc";
      } else if (status === "故障") {
        return "gz";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.health_wrap {
  display: flex;
  flex-direction: column;
  .charts_wrap {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 0 28px;
    height: 165px;
    background: linear-gradient(to bottom, #0c2d5c, #124181);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .charts_items {
      width: 30%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: center;
      .charts_main {
        width: 100%;
        height: 94px;
      }
      .charts_info {
        display: flex;
        align-items: center;
        padding-top: 14px;
        position: relative;
        justify-content: space-around;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 3px;
          top: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to right, #21569e, #2490c6, #21569e);
        }
        .info_div {
          font-size: 16px;
          color: #fff;
        }
      }
    }
  }
  .health_content {
    width: 100%;
    height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #0d1e3c, #163368);
    box-sizing: border-box;
    border: 1px solid #3f6286;
    padding: 20px 24px;
    .search_wrap {
      flex: 0 0 auto;
      display: flex;
      .search_list {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        .search_item {
          width: 27.5%;
          display: flex;
          align-items: center;
          margin-right: 4%;
          margin-top: 20px;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &:nth-child(-n + 3) {
            margin-top: 0;
          }
          &.search_item_other {
            width: 37%;
          }
          .search_name {
            flex: 0 0 auto;
            font-size: 20px;
            color: #cbcbcb;
            margin-right: 6px;
          }
          .search_ipt {
            flex: 1 1 auto;
          }
          .search_other {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #cbcbcb;
            margin-left: 20px;
            .search_ipt {
              margin: 0 20px;
            }
          }
        }
      }
      .search_btn {
        flex: 20%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }
    }
    .table_main {
      flex: 1 1 auto;
      height: 0;
      margin: 20px 0;
      .table_box_status {
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #7d7e7f;
          margin-right: 5px;

          &.zc {
            background-color: #52ab35;
          }

          &.yc {
            background-color: #e2912d;
          }

          &.gz {
            background-color: #bf1921;
          }
        }
      }
      .table_box_use {
        display: flex;
        align-items: center;
        justify-content: center;
        .use_wrap {
          flex: 0 0 auto;
          height: 30px;
          box-sizing: border-box;
          border: 1px solid #3474ba;
          display: flex;
          align-items: center;
          .use_info {
            margin: 0 6px;
            width: 80px;
            background-color: #fff;
            position: relative;
            .use_tiao {
              height: 10px;
              &.zc {
                background: linear-gradient(to right, #4471b1, #50c6e6);
              }
              &.yc {
                background: linear-gradient(to right, #d98e30, #d98e30);
              }
              &.wx {
                background: linear-gradient(to right, #b51d22, #b51d22);
              }
            }
            .use_tiao_text {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              font-size: 14px;
            }
          }
        }
        .use_text {
          flex: 0 0 auto;
          margin-left: 10px;
        }
      }
    }
    .main_fenye {
      flex: 0 0 auto;
    }
  }
}
</style>
